
import './index.css';
import E from "wangeditor";
import { useCallback, useEffect, useState } from 'react';

import './index.css';
import { Button, Image } from '@arco-design/web-react';
import { ConversationInfoItem, ConversationType, PermissionType } from '../../../../types/conversation';
import { userInfoState } from '../../../../../store/userInfo';
import { useRecoilValue } from 'recoil';
import { ImageUpload } from '../../../ImageUpload';

interface ConversationEditorProps {
  handleSubmit: (curEditor: E) => void;
  handleOrderTicket: () => void;
  handleEndTicket: () => void;
  handleSubmitImage: (curEditor: E, url: string) => void;
  currentConversation: ConversationInfoItem;
}

export const ConversationEditor: React.FC<ConversationEditorProps> = (props) => {

  const { handleSubmit, handleSubmitImage, currentConversation, handleOrderTicket, handleEndTicket } = props;
  const userInfo = useRecoilValue(userInfoState);

  const [curEditor, setCurEditor] = useState<E>();

  useEffect(() => {
    // 注：class写法需要在componentDidMount 创建编辑器
    const editor = new E(`#editor`);

    editor.config.excludeMenus = [
      'head',
      'bold',
      'fontSize',
      'fontName',
      'italic',
      'underline',
      'strikeThrough',
      'indent',
      'lineHeight',
      'foreColor',
      'backColor',
      'link',
      'list',
      'todo',
      'justify',
      'quote',
      'emoticon',
      'image',
      'video',
      'table',
      'code',
      'splitLine',
      'undo',
      'redo',
    ]

    editor.config.showFullScreen = false;
    editor.config.height = 150;

    /**一定要创建 */
    editor.create();

    setCurEditor(editor);

    return () => {
      // 组件销毁时销毁编辑器
      editor.destroy();
    }
  }, []);

  useEffect(() => {
    if (currentConversation.type === ConversationType.End) {
      curEditor?.disable();
      return;
    }

    if (userInfo.permission !== PermissionType.customer &&
      currentConversation.staff_id !== userInfo.id &&
      currentConversation.staff_id !== 2) {
      curEditor?.disable();
      return;
    }
    curEditor?.enable();
    curEditor?.txt.clear();

  }, [currentConversation]);

  const renderBtnGroup = useCallback(() => {
    if (userInfo.permission === PermissionType.customer) {
      return <>
        <div className='image-upload'>
          <ImageUpload handleSubmitImage={(url: string) => {
            curEditor && handleSubmitImage(curEditor, url);
          }} />
        </div>
        <Button onClick={() => {
          curEditor && handleSubmit(curEditor);
        }} className='conversation-editor-submit-btn' shape='round' type='primary'>
          上传
        </Button>
      </>
    }
    switch (currentConversation.type) {
      case ConversationType.Serving:
        if (currentConversation.staff_id === userInfo.id) {
          return <>
            <div className='image-upload'>
              <ImageUpload handleSubmitImage={(url: string) => {
                curEditor && handleSubmitImage(curEditor, url);
              }} />
            </div>
            <Button onClick={() => {
              handleEndTicket();
            }} className='conversation-editor-end-btn' shape='round' type='default'>
              结单
            </Button>
            <Button onClick={() => {
              console.log(curEditor?.txt.text());
              curEditor && handleSubmit(curEditor);
            }} className='conversation-editor-submit-btn' shape='round' type='primary'>
              上传
            </Button>
          </>
        }
        return <></>

      case ConversationType.Waiting:
        return <Button onClick={handleOrderTicket} className='conversation-editor-order-btn' shape='round' type='primary'>
          接单
        </Button>
      case ConversationType.End:
      default:
        return <></>;
    }
  }, [currentConversation.type, handleSubmit, curEditor]);

  return <div className="conversation-editor-wrapper">
    <div id='editor' className='conversation-editor'></div>

    {renderBtnGroup()}
  </div>
}